<style lang='scss' scoped>
@import "@/assets/css/variable";
.staffManage {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: $main-bgc;
  min-height: 100%;
  font-size: 1.2rem;
  overflow: auto;
  box-sizing: border-box;
  .header-box {
    border-bottom: 1px solid $border-c;
    background-color:white;
    padding: 1.4rem 1.7rem;
    .title {
      font-size: 1.8rem;
    }
  }
  .list-box {
    background-color: white;
    .item {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 1.7rem;
      border-bottom: 1px solid $border-c;
    }
  }
  .add-box{
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
</style>
<template>
  <div class="staffManage padding-all-m">
    <div class="header-box border-r-l">
      <div class="title t-bold">{{userInfo.name}}</div>
      <!-- <div>当前共计<i>1</i>个学员</div> -->
    </div>
    <div class="list-box border-r-l margT-l" v-if="list&&list.length>0">
      <div class="item" v-for="(item, index) in list" :key="index">
        <span>{{ item.name }}</span>
        <a :href="`tel:${item.mobile}`">{{ item.mobile }}</a>
      </div>
    </div>
    <div v-else class="no-data padding-all-l color-s">暂无核销员</div>
    <div class="add-box margT-l b-center">
      <van-button :color="$store.getters.getMasterColor" block @click="refreshList">刷新列表</van-button>
    </div>
    <div class="add-box margT-l b-center">
      <!-- <van-button :color="$store.getters.getMasterColor" block>添加核销员</van-button> -->
      <canvas class="qrcode margT-l" id="qrCode-canvas"></canvas>
      <div class="color-l padding-all-l">Tips:让工作人员的微信扫码即可添加为核销员</div>
    </div>
  </div>
</template>

<script>
import { Button, Icon, Toast } from "vant";
import QRCode from 'qrcode';
export default {
  name:'StaffManage',
  components: {
    [Icon.name]: Icon,
    [Button.name]: Button
  },
  data() {
    return {
      toUrl:'',
      userInfo:'',
      list: [{
        name: "张三",
        mobile: "139213838333"
      },{
        name: "张三",
        mobile: "139213838333"
      }],
      pageNo: 1,
      pageSize: 10
    };
  },
  mounted() {
    this.userInfo = this.$store.state.userInfo
    if(!this.userInfo.id){
      this.$router.replace('my')
    }
    this.getVerificationPage()
    this.$nextTick(()=>{
      this.createQrcode()
    },500)
  },
  methods: {
    refreshList() {
      this.getVerificationPage()
    },
    getVerificationPage() {
      let toast = Toast.loading({
        forbidClick: true,
        message: '加载中...',
      });
      let params = {
        merchant_id: this.userInfo.id,
        pageNo: 1,
        pageSize: 20
      }
      this.$request.getVerificationPage(params).then(res=>{
        this.list = res.data.data
        toast.clear()
      })
    },
    createQrcode(){
      let href = `${location.protocol}//${location.hostname + '/addons/youmi_activitys/public/mobile/index.html#/addStaff'}?merchant_id=${this.userInfo.id}`;
      let canvas = document.getElementById('qrCode-canvas')
      QRCode.toCanvas(canvas, href, (error) => {
          if (error) {
              console.log(error)
          } else {
              canvas.style.width = '12rem'
              canvas.style.height = '12rem'
          }
      })
    },
  },
};
</script>